<template>
  <CommonCard title="今日交易用户数" :value="(orderUser as number)">
    <v-chart :option="getOption()" autoresize />
    <template v-slot:bottom>
      <span>退货率</span>
      <span class="emphasis">{{ returnRate + "%" }}</span>
    </template>
  </CommonCard>
</template>

<script lang="ts">
export default {
  name: "TodayUsers",
};
</script>

<script lang="ts" setup>
import CommonCard from "./CommonCard.vue";
import { useDataStore } from "@/stores/reportData";
import { computed } from "vue";

const dataStore = useDataStore();
const orderUser = computed(() => dataStore.reportData.orderUser);
const returnRate = computed(() => dataStore.reportData.returnRate);
const orderUserTrend = computed(
  () => dataStore.reportData.orderUserTrend || []
);
const orderUserTrendAxis = computed(
  () => dataStore.reportData.orderUserTrendAxis || []
);

const getOption = () => {
  return {
    //x轴的配置
    xAxis: {
      data: orderUserTrendAxis.value, // x轴数据
    },
    //y轴配置
    yAxis: {
      show: false,
    },
    //图标配置
    series: [
      {
        name: "实时交易量", // 图标名称
        //type:bar代表柱状态
        type: "bar",
        // 列表数据(和x轴数据对应)
        data: orderUserTrend.value,
        //柱子的占用他区域的宽度
        barWidth: "10%", // 宽度占用比例
      },
    ],
    // 图表在坐标中显示的位置
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },

    // 柱的颜色
    color: ["green"],
    // 显示提示
    tooltip: {
      //柱状图的tip触发条件也是axis
      trigger: "axis",

      //如果图过小,提示可能会展示在echart区域外,解决方案有如下两种
      //1.设置confine为true:可能会盖住图片
      // confine: true,
      //2.设置position函数,配置tip的位置,函数返回定位
      position: function (
        //鼠标位置的对象,下标为0就是鼠标x轴的位置
        point: any,
        params: any,
        dom: any,
        rect: any,
        //提示框的大小配置对象,内部有一个contentSize代表提示框的宽度
        size: any
      ) {
        // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
        // 提示框位置
        let x = 0; // x坐标位置

        // 当前鼠标位置
        let pointX = point[0];
        let pointY = point[1];

        // 提示框大小
        let boxWidth = size.contentSize[0];

        // boxWidth > pointX 说明鼠标左边放不下提示框
        if (boxWidth > pointX) {
          x = 5;
        } else {
          // 左边放的下
          x = pointX - boxWidth;
        }

        return [x, -90 + pointY];
      },
    },
  };
};
</script>

<style lang="scss" scoped></style>
